<template>
  <div>

    <main class="container">
      <n-input v-model:value="name" type="text" />
    </main>
    <n-button class="item" @click="startTray">开启图标闪烁</n-button>
    <n-button class="item" @click="endTray">关闭图标闪烁</n-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { platform } from "@tauri-apps/plugin-os";
import { type } from "@tauri-apps/plugin-os";
import { destroyTray, startBlinking, stopBlinking } from "@/hooks/tray";
const name = ref("");


const currentPlatform = platform();
console.log("获取操作系统类型", currentPlatform, type() === "windows");

class ChatApp {


  onNewMessage() {
    // 收到新消息时启动红色提醒闪烁
    startBlinking("icons/dog.png", "icons/dog_last.png");
  }

  onMessageRead() {
    // 用户查看消息后停止闪烁
    stopBlinking();
  }

  async shutdown() {
    // 退出时清理资源
    await destroyTray();
  }
}

const chat = new ChatApp()
function startTray() {
  chat.onNewMessage()
}
function endTray() {
  chat.onMessageRead()
}
console.log('chat :>> ', chat);
</script>
<style scoped lang="less">
.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.titlebar-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  user-select: none;
  -webkit-user-select: none;
}

.titlebar-button:hover {
  background: #5bbec3;
}

.container {
  background: lightcyan;
  margin-top: 30px;
}
</style>
